@extends('Admin.base')
@section('style')
    <style>
        .grid-demo{width: 100%;text-align: center;}
        .active-1 span,.active-2 span,.active-3 span,.active-4 span,.active-5 span,.active-6 span{
            display: flex;
            padding: 10px 15px;
            border-radius: 10px;
            transition: all .3s;
            -webkit-transition: all .3s;
            align-items:center;
        }
        .active-1 span{background: #E05F59;}
        .active-2 span{background: #FF9933;}
        .active-3 span{background: #6699FF;}
        .active-4 span{background: #FF99CC;}
        .active-5 span{background: #9999FF;}
        .active-6 span{background: #199ED8;}
    </style>
@endsection
@section('content')
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-row">
                <div class="layui-col-md4">
                    <ul class="layui-row layui-col-space10 layui-this" >
                        <li class="layui-col-xs6 active-1">
                            <span style="height: 90px;">
                                <h2 style="margin:0 auto;">{{$data[9] ?? ''}}</h2>
                            </span>
                        </li>
                        <li class="layui-col-xs6 active-2">
                            <span style="height: 30px;">
                               <h2 style="margin:0 auto;">{{$data[10] ?? ''}}</h2>
                            </span>
                        </li>
                        <li class="layui-col-xs6 active-3">
                            <span style="height: 30px;">
                                <h2 style="margin:0 auto;">{{$data[11] ?? ''}}</h2>
                            </span>
                        </li>
                        <li class="layui-col-xs12 active-4">
                            <span style="height: 30px;">
                                <h2 style="margin:0 auto;">{{$data[12] ?? ''}}</h2>
                            </span>
                        </li>
                        <li class="layui-col-xs12 active-5">
                            <span style="height: 30px;">
                                <h2 style="margin:0 auto;">{{$data[13] ?? ''}}</h2>
                            </span>
                        </li>
                        <li class="layui-col-xs12 active-6">
                            <span style="height: 30px;">
                                <h2 style="margin:0 auto;">{{$data[17] ?? ''}}</h2>
                            </span>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
        <div class="layui-card-body">
            <table id="LAY-table" lay-filter="LAY-table"></table>
            <script type="text/html" id="table-toolbar">
                <a href="{{url('admin/activeBanner')}}/@{{ d.id }}/edit" class="layui-btn layui-btn-green layui-btn-xs">
                    编辑
                </a>
            </script>
            <script type="text/html" id="photoTpl">
                <a href="@{{ d.photo }}" target="_blank">
                    <img style="display: inline-block; max-width:80px; " src="@{{ d.photo }}" alt="">
                </a>
            </script>
        </div>
    </div>
@endsection
@section('script')
    <script src="/js/ajax.js"></script>
    <script>
        layui.use(['form', 'table'], function(){
            var $ = layui.$
                ,form = layui.form
                ,table = layui.table;
            table.render({
                elem: '#LAY-table'
                ,url: "{{route('activeBanner.table')}}"
                ,method: "post"
                ,page: false
                ,cols: [[
                    {field: 'remark', title: '活动名称', align:'center'}
                    ,{field: 'photo', title: '图片', align:'center', toolbar:'#photoTpl', width: 120}
                    ,{field: 'jump_url', title: '跳转地址'}
                    ,{field: 'status', title: '状态', align:'center', width: 120,templet: function(d){
                            if(d.id == 9 || d.id == 10 || d.id == 11) return '';
                            var checked = '',html = '';
                            if(d.status == '{{\App\Models\Banner::statusTrue}}'){
                                checked = 'checked';
                            }
                            html = '<input type="checkbox" name="status" lay-skin="switch" lay-text="开启|关闭" value="1" ' + checked + '  lay-filter="status" data-id="'+d.id+'">';
                            return html;
                        }}
                    ,{field: 'updated_at', title: '更新时间', align:'center', width: 200}
                    ,{title: '操作', width:80, align: 'right', toolbar: '#table-toolbar'}
                ]]
            });
            /* 表格编辑JS处理 */
            table.on('edit(LAY-table)', function(obj){
                $.ajax({
                    url: "{{url('/admin/activeBanner/updateField')}}/"+obj.data.id
                    , type: 'POST'
                    , dataType: 'json'
                    , data: {field:obj.field,value:obj.value,_method:'PUT'}
                    , beforeSend: function(){
                        layer.load(2);
                    }
                    , complete: function(){
                        layer.closeAll('loading');
                    }
                    , success: function (ret) {
                        if (ret.hasOwnProperty('code') && ret.code == 200) {
                            layer.msg(ret.message,{icon:1});
                            //执行重载
                            table.reload('LAY-table');
                            return false;
                        }
                        layer.msg(ret.message,{icon:2});
                    }
                });
            });

            form.on('switch(status)', function(data){
                $.ajax({
                    url: "{{route('activeBanner.status')}}"
                    , type: 'POST'
                    , dataType: 'json'
                    , data: {id:$(data.elem).data('id')}
                    , beforeSend:function(){
                        layer.load(2);
                    }
                    , complete: function(){
                        layer.closeAll('loading');
                    }
                    , success: function (ret) {
                        if (ret.hasOwnProperty('code') && ret.code == 200) {
                            layer.msg(ret.message,{icon:1});
                            return false;
                        }
                        layer.msg(ret.message,{icon:2});
                    }
                });
            });
        });
    </script>

@endsection